<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
            font-size: 12px;
        }
        body>div{
            width: 1220px;
            height: 223px;
            background-color: #e8e8e8;
            /*控制div元素居中，上下0，左右自动*/
            margin: 0 auto;
        }
        ul{
            list-style-type: none;/*去掉图标*/
            padding: 0;/*去掉自带左内边距*/
        }
        li{
            width: 224px; /*1220/5 -20(外边距)*/
            height: 223px;
            margin: 0 10px;/*左右各10个像素外边距*/
            background-color: white;/*白背景*/
            float: left;
            border-radius: 5px;
            overflow: hidden;/*超出部分不显示, 为了显示出圆角效果*/

        }
        li:hover{
            position: relative;/*相对定位*/
            bottom: 5px;
            /*元素阴影:x偏移值 y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 8px 2px red;
        }

        .t_div img{
            width: 100%;/*上级元素宽度 224*/
        }
        .b_div{
            padding: 15px;/*内边距*/
        }
        h4{
            margin: 0 0 12px 0;
        }
        h4>a{
            color: black;
            font-weight: normal;
            text-decoration: none;
            font-size: 14px;
        }
        .s1{
            color: #4f8dfe;
        }
        .s2{
            color: #8888;
            float: right;/*显示到右侧*/
        }
        .state{
            display: block;
            background-image: url("https://cdn.tmooc.cn/tmooc-web/css/img/state-free.png");
            width: 44px;
            height: 44px;
            /*设置绝对定位让元素显示到左上角*/
            position: absolute;
            top: 0;
        }
        .t_div{
            position: relative;/*参照物*/
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <div class="t_div">
                <a href=""><img src="http://cdn.tmooc.cn/bsfile//courseImg///e2a318438dcd41e99892e73bf151e8af.jpg" alt="">
                    <i class="state"></i>
                </a>
            </div>
            <div class="b_div">
                <h4>
                    <a href="">【职达】360-设计师岗位的三十六计</a>
                </h4>
                <div>
                    <span class="s1">免费</span>
                    <span class="s2">2,425人报名</span>
                </div>
            </div>
        </li>
        <li>
            <div class="t_div">
                <a href="">
                    <img src="https://cdn.tmooc.cn/bsfile//courseImg///e2a318438dcd41e99892e73bf151e8af.jpg" alt="">
                    <i class="state"></i>
                </a>
            </div>
            <div>
                <div class="b_div">
                    <h4>
                        <a href="">【职达】360-设计师岗位的三十六计</a>
                    </h4>
                    <div>
                        <span class="s1">免费</span>
                        <span class="s2">2,425人报名</span>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="t_div">
                <a href="">
                    <img src="https://cdn.tmooc.cn/bsfile//courseImg///e2a318438dcd41e99892e73bf151e8af.jpg" alt="">
                    <i class="state"></i>
                </a>
            </div>
            <div class="b_div">
                <h4>
                    <a href="">【职达】360-设计师岗位的三十六计</a>
                </h4>
                <div>
                    <span class="s1">免费</span>
                    <span class="s2">2,425人报名</span>
                </div>
            </div>
        </li>
        <li>
            <div class="t_div">
                <a href="">
                    <img src="https://cdn.tmooc.cn/bsfile//courseImg///e2a318438dcd41e99892e73bf151e8af.jpg" alt="">
                    <i class="state"></i>
                </a>
            </div>
            <div class="b_div">
                <h4>
                    <a href="">【职达】360-设计师岗位的三十六计</a>
                </h4>
                <div>
                    <span class="s1">免费</span>
                    <span class="s2">2,425人报名</span>
                </div>
            </div>
        </li>
        <li>
            <div class="t_div">
                <a href="">
                    <img src="https://cdn.tmooc.cn/bsfile//courseImg///e2a318438dcd41e99892e73bf151e8af.jpg" alt="">
                    <i class="state"></i>
                </a>
            </div>
            <div class="b_div">
                <h4>
                    <a href="">【职达】360-设计师岗位的三十六计</a>
                </h4>
                <div>
                    <span class="s1">免费</span>
                    <span class="s2">2,425人报名</span>
                </div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>